[V0_FILE]typescriptreact:file="tailwind.config.ts" import type { Config } from "tailwindcss" const config: Config = { darkMode: ["class"], content: [ "./pages/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}", "./app/**/*.{js,ts,jsx,tsx,mdx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, // Custom colors for the app "app-green": { light: "#4CAF50", DEFAULT: "#2e7d32", dark: "#1b5e20", }, "app-cyan": { light: "#80DEEA", DEFAULT: "#00BCD4", dark: "#006064", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: "0" }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: "0" }, }, gradient: { "0%": { backgroundPosition: "0% 50%" }, "50%": { backgroundPosition: "100% 50%" }, "100%": { backgroundPosition: "0% 50%" }, }, float: { "0%, 100%": { transform: "translateY(0)" }, "50%": { transform: "translateY(-10px)" }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", gradient: "gradient 15s ease infinite", float: "float 6s ease-in-out infinite", }, backgroundImage: { "gradient-radial": "radial-gradient(var(--tw-gradient-stops))", }, }, }, plugins: [require("tailwindcss-animate")], } export default config [V0_FILE]css:file="app/globals.css" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 142 70% 33%; --primary-foreground: 210 40% 98%; --secondary: 180 100% 42%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 142 70% 33%; --radius: 0.5rem; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 142 70% 50%; --primary-foreground: 222.2 47.4% 11.2%; --secondary: 180 100% 50%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 142 70% 50%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } .animated-gradient { background: linear-gradient(-45deg, #2e7d32, #006064, #1b5e20, #00838f); background-size: 400% 400%; animation: gradient 15s ease infinite; } .dark .animated-gradient { background: linear-gradient(-45deg, #4caf50, #00bcd4, #81c784, #26c6da); background-size: 400% 400%; animation: gradient 15s ease infinite; } @keyframes gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } .floating { animation: float 6s ease-in-out infinite; } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } [V0_FILE]typescriptreact:file="components/header.tsx" import Link from "next/link" import Image from "next/image" import { ModeToggle } from "./mode-toggle" import { LanguageSelector } from "./language-selector" export function Header() { return (

Abokin Manomi

) } [V0_FILE]typescriptreact:file="components/mode-toggle.tsx" "use client" import { Moon, Sun } from "lucide-react" import { useTheme } from "next-themes" import { Button } from "@/components/ui/button" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu" export function ModeToggle() { const { setTheme } = useTheme() return ( setTheme("light")}>Light setTheme("dark")}>Dark setTheme("system")}>System ) } [V0_FILE]typescriptreact:file="components/footer.tsx" import Image from "next/image" export function Footer() { return ( ) } [V0_FILE]typescriptreact:file="components/animated-background.tsx" "use client" import { useEffect, useRef } from "react" export function AnimatedBackground() { const canvasRef = useRef(null) useEffect(() => { const canvas = canvasRef.current if (!canvas) return const ctx = canvas.getContext("2d") if (!ctx) return canvas.width = window.innerWidth canvas.height = window.innerHeight const particles: Particle[] = [] const particleCount = 50 class Particle { x: number y: number size: number speedX: number speedY: number color: string constructor() { this.x = Math.random() * canvas.width this.y = Math.random() * canvas.height this.size = Math.random() * 5 + 1 this.speedX = Math.random() * 3 - 1.5 this.speedY = Math.random() * 3 - 1.5 this.color = `rgba(255, 255, 255, ${Math.random() * 0.2})` } update() { this.x += this.speedX this.y += this.speedY if (this.x > canvas.width) this.x = 0 else if (this.x < 0) this.x = canvas.width if (this.y > canvas.height) this.y = 0 else if (this.y < 0) this.y = canvas.height } draw() { ctx.fillStyle = this.color ctx.beginPath() ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2) ctx.fill() } } const init = () => { for (let i = 0; i < particleCount; i++) { particles.push(new Particle()) } } const animate = () => { ctx.clearRect(0, 0, canvas.width, canvas.height) for (let i = 0; i < particles.length; i++) { particles[i].update() particles[i].draw() } requestAnimationFrame(animate) } const handleResize = () => { canvas.width = window.innerWidth canvas.height = window.innerHeight } window.addEventListener("resize", handleResize) init() animate() return () => { window.removeEventListener("resize", handleResize) } }, []) return

About

Tags

Share

About

Tags

Share

More from azeezyunusa2023-2188

More Templates Like This

About

Tags

Share

About

Tags

Share

More from azeezyunusa2023-2188

More Templates Like This